<template>
  <div>
    <el-dialog class="positionDialog" :title="this.ruleForm.id ? '修改' : '新增'" :visible="showDialog" width="98%"
      :before-close="handleClose" :modal="false" :close-on-click-modal="false">
      <div class="content">
        <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <div class="title fir-title">
            <svg-icon class="svg-icon" icon-class="infoAdd" />
            <span>入库填报</span>
          </div>
          <div class="form">
            <el-form-item label="智慧卡号" prop="">
              <el-input v-model="ruleForm.cardNumber" placeholder="请输入智慧卡号" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" prop="carName">
              <el-select style="width: 100%;" v-model="ruleForm.carName" filterable placeholder="请选择车牌号或输入关键词"
                :disabled="true">
                <el-option v-for="item in carList" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item label="司机姓名" prop="driverName">
              <el-select style="width: 100%;" v-model="ruleForm.driverName" filterable placeholder="请选择司机姓名或输入关键词"
                :disabled="true">
                <el-option v-for="item, index in driverList" :key="item.value + index" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item v-if="hasIdentifier('Inbound.field')" label="押车人" prop="personPhone">
              <el-select style="width: 100%;" v-model="ruleForm.personName" filterable placeholder="请选择押车人或输入关键词"
                :disabled="true">
                <el-option v-for="item, index in escortPersonList" :key="item.value + index" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button class="redAdd" @click="handleShowAddDialog('betcarInfo')">新增</el-button>
            </el-form-item>
          </div>
          <div class="title">
            <span>仓库信息</span>
          </div>
          <div class="form">
            <el-form-item label="农场" prop="farmCode">
              <el-select style="width: 100%;" v-model="ruleForm.farmName" filterable placeholder="请选择农场或输入关键词"
                :disabled="true">
                <el-option v-for="item in farmList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="来自生产队" prop="sourceTeam">
              <el-select style="width: 100%;" v-model="ruleForm.sourceTeamName" filterable placeholder="请选择生产队或输入关键词"
                :disabled="true">

                <el-option v-for="item in teamList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="hasIdentifier('Inbound.field')" label="来自地块号" prop="massifNumber">
              <el-select style="width: 100%;" v-model="ruleForm.massifName" filterable placeholder="请选择地块号或输入关键词"
                :disabled="true">
                <el-option v-for="item, index in massifNumberList" :key="item.value + index" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="种类" prop="cropType">
              <el-select style="width: 100%;" v-model="ruleForm.cropType" filterable placeholder="请选择作物类型或输入关键词"
                :disabled="true">
                <el-option v-for="item, index in cropinfoList" :key="item.label + index" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品质" prop="cropQuality">
              <el-select style="width: 100%;" v-model="ruleForm.cropQuality" filterable placeholder="请选择作物类型或输入关键词"
                :disabled="true">
                <el-option v-for="item in cropQualityList" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓号" prop="warehouseNumber">
              <el-select style="width: 100%;" v-model="ruleForm.warehouseNumber" filterable placeholder="请选择仓号或输入关键词"
                :disabled="true">
                <el-option v-for="item in wareList" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="垛号" prop="stampId">
              <el-select style="width: 100%;" v-model="ruleForm.stampId" filterable placeholder="请选择垛号或输入关键词"
                :disabled="true">
                <el-option v-for="item in duoList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="作物品种" prop="cropVarieties">
              <el-select style="width: 100%;" v-model="ruleForm.cropVarieties" filterable placeholder="请选择作物品种或输入关键词"
                :disabled="true">
                <el-option v-for="item in cropVarietiesList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item label="类别" prop="categoryName">
              <el-select style="width: 100%;" v-model="ruleForm.categoryName" filterable placeholder="请选择类别或输入关键词"
                :disabled="true">
                <el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </div>
          <div class="title">
            <span>过磅信息</span>
          </div>
          <div class="form">
            <el-form-item label="毛重(kg)" prop="gw">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.gw" placeholder="请输入毛重"
                :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="皮重(kg)" prop="tare">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.tare" placeholder="请输入皮重"
                :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="净重(kg)" v-if="hasIdentifier('Inbound.field')" prop="">
              <el-input v-model="netWeight" placeholder="请输入净重" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="净重(kg)" v-if="!hasIdentifier('Inbound.field')" prop="">
              <el-input v-model="ruleForm.nw" placeholder="请输入净重" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="过毛时间" :prop="ruleForm.gw ? 'hairingTime' : 'hairingTime'">
              <el-date-picker style="width: 100%;" v-model="ruleForm.hairingTime" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择过毛时间" :disabled="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="过皮时间" :prop="ruleForm.tare ? 'peelingTime' : 'peelingTime'">
              <el-date-picker style="width: 100%;" v-model="ruleForm.peelingTime" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择过皮时间" :disabled="true">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="title">
            <span>扦样质检信息</span>
          </div>
          <div class="form">
            <el-form-item label="含水量(%)">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.water"
                placeholder="请输入含水量(0-100)" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="含油量(%)">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.yau"
                placeholder="当作物为油菜时请输入含油量(0-100)" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="面筋值(%)">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.glutenValue"
                placeholder="当作物为小麦时请输入面筋值(0-100)" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item v-if="hasIdentifier('Inbound.field')" label="扣水比例(%)" prop="">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.waterRatio" placeholder="请输入扣水比例"
                :disabled="true" style="position: relative;"></el-input>
              <div class="error-message" style="position: absolute;bottom: -30px;">扣水重量：{{ waterWeight.toFixed(2) }} kg
              </div>
            </el-form-item>
            <el-form-item v-if="hasIdentifier('Inbound.field')" label="扣杂比例(%)" prop="">
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="ruleForm.mixedRatio" placeholder="请输入扣杂比例"
                :disabled="true" style="position: relative;"></el-input>
              <div class="error-message" style="position: absolute;bottom: -30px;">扣杂重量：{{ mixedWeight.toFixed(2) }} kg
              </div>
            </el-form-item>
            <el-form-item v-if="hasIdentifier('Inbound.field')" label="扣杂后净重(kg)" prop="">
              <el-input v-model="ruleForm.nw" placeholder="请输入净重" :disabled="true"
                style="position: relative;"></el-input>
              <div class="error-message" style="position: absolute;bottom: -30px;">扣杂后净重 = 净重*（1-扣水比例-扣杂比例）</div>
            </el-form-item>
          </div>
          <div class="kongkong" style="width: 100%;height: 40px;"></div>
        </el-form>
        <!-- <div class="button-box">
          <div class="inStoragePCButton">空车写入</div>
          <div class="inStoragePCButton">满车写入</div>
        </div> -->
      </div>

      <div class="dialog-footer">
        <el-button class="back" @click="handleClose">返 回</el-button>
      </div>
    </el-dialog>

    <!-- 新增车牌号 -->
    <CarInfo ref="CarInfo" :showDialog.sync="carInfo" @handleRefresh="handleRefreshList('carInfo')"></CarInfo>
    <!-- 司机信息 -->
    <DriverInfo ref="DriverInfo" :showDialog.sync="driverInfo" @handleRefresh="handleRefreshList('driverInfo')">
    </DriverInfo>
    <!-- 押车人信息 -->
    <BetcarInfo ref="BetcarInfo" :showDialog.sync="betcarInfo" @handleRefresh="handleRefreshList('betcarInfo')">
    </BetcarInfo>
    <!-- 种类 -->
    <CropInfo ref="CropInfo" :showDialog.sync="cropInfo" @handleRefresh="handleRefreshList('cropInfo')"></CropInfo>
    <!-- 作物品种 -->
    <CropVariety ref="CropVariety" :showDialog.sync="cropVariety" @handleRefresh="handleRefreshList('cropVariety')">
    </CropVariety>
    <!-- 作物类别 -->
    <CropType ref="CropType" :showDialog.sync="cropType" @handleRefresh="handleRefreshList('cropType')"></CropType>
    <!-- 水份扣重 -->
    <WaterStandard ref="WaterStandard" :showDialog.sync="waterStandard"
      @handleRefresh="handleRefreshList('waterStandard')">
    </WaterStandard>
    <!-- 扣杂标准 -->
    <ImpurityStandard ref="ImpurityStandard" :showDialog.sync="impurityStandard"
      @handleRefresh="handleRefreshList('impurityStandard')"></ImpurityStandard>
  </div>
</template>

<script>
import '../scss/style.scss'
import rules from '@/utils/rules'
import { Message } from 'element-ui'
import { filterSelect, formatDate } from '@/utils/methods'
import { addApi, editApi, warehouseApi, getCropTypeApi, getduoApi, getQualityApi, getInfoApi } from '@/api/inCage'
import { selectApi, carinfoApi, driverInfoApi, cropTypeApi, categorySelectApi } from '@/api/select'
import CarInfo from '@/views/info/components/CarInfo/dialog/AddPopu.vue'
import DriverInfo from '@/views/info/components/DriverInfo/dialog/AddPopu.vue'
import BetcarInfo from '@/views/info/components/BetcarInfo/dialog/AddPopu.vue'
import CropInfo from '@/views/info/components/CropInfo/dialog/AddPopu.vue'
import CropVariety from '@/views/info/components/CropVariety/dialog/AddPopu.vue'
import CropType from '@/views/info/components/CropType/dialog/AddPopu.vue'
import WaterStandard from '@/views/info/components/WaterStandard/dialog/AddPopu.vue'
import ImpurityStandard from '@/views/info/components/ImpurityStandard/dialog/AddPopu.vue'
import { mapGetters } from 'vuex';
export default {
  props: ['showDialog'],
  components: {
    CarInfo,
    DriverInfo,
    BetcarInfo,
    CropInfo,
    CropVariety,
    CropType,
    WaterStandard,
    ImpurityStandard
  },
  data() {
    return {
      // 毛重-皮重=净重
      netWeight: '',
      waterWeight: 0,
      mixedWeight: 0,
      ruleForm: {
        cardNumber: '',
        carName: '',
        driverPhone: '',
        driverName: '',
        farmCode: '',
        teamCode: '',
        // 货物来源生产队
        sourceTeam: '',
        cropType: '',
        cropQuality: '',
        warehouseNumber: '',
        stampId: '',
        cropVarieties: '',
        categoryName: '',
        gw: '',
        tare: '',
        nw: '',
        hairingTime: '',
        peelingTime: '',
        water: '',
        yau: '',
        glutenValue: '',
      },
      rules: [],
      // 车牌号
      carList: [],
      // 司机
      driverList: [],
      // 农场
      farmList: [],
      // 生产队
      teamList: [],
      // 押车人
      escortPersonList: [],
      // 地块号
      massifNumberList: [],
      // 作物种类
      cropinfoList: [],
      // 作物品种
      cropVarietiesList: [],
      // 作物类别
      categoryList: [],
      // 品质
      cropQualityList: [],
      // 仓号
      wareList: [],
      // 垛号
      duoList: [],
      carInfo: false,
      driverInfo: false,
      betcarInfo: false,
      cropInfo: false,
      cropVariety: false,
      cropType: false,
      waterStandard: false,
      impurityStandard: false,
    };
  },
  computed: {
    ...mapGetters(['hasIdentifier']), // 映射 getters
  },
  methods: {
    handleClose() {
      this.$emit('update:showDialog', false)
      this.ruleForm = {
        cardNumber: '',
        carName: '',
        driverPhone: '',
        driverName: '',
        farmCode: '',
        teamCode: '',
        // 货物来源生产队
        sourceTeam: '',
        cropType: '',
        cropQuality: '',
        warehouseNumber: '',
        stampId: '',
        cropVarieties: '',
        categoryName: '',
        gw: '',
        tare: '',
        nw: '',
        hairingTime: '',
        peelingTime: '',
        water: '',
        yau: '',
        glutenValue: '',
      },
        this.$refs.ruleForm.resetFields();
    },
    // 回填
    async getInfo(id) {
      let { data } = await getInfoApi({ id })
      this.ruleForm = data
      if (this.ruleForm.gw && this.ruleForm.tare) {
        this.netWeight = this.ruleForm.gw - this.ruleForm.tare
        console.log('this.ruleForm.waterRatio', this.ruleForm.waterRatio);
        console.log('this.ruleForm.mixedWeight', this.ruleForm.mixedWeight);
        if (this.ruleForm.waterRatio != null) {
          this.waterWeight = this.netWeight * (this.ruleForm.waterRatio / 100)
        }
        if (this.ruleForm.mixedRatio != null) {
          this.mixedWeight = this.netWeight * (this.ruleForm.mixedRatio / 100)
        }

      } else {
        this.netWeight = ''
      }

    },
  }
}
</script>

<style lang='scss' scoped>
.form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.el-form-item {
  width: 33%;
}

.fir-title {
  margin-top: 0 !important;
}

.content {
  display: flex;
}

.button-box {
  margin-top: 60px;
}

.inStoragePCButton {
  width: 120px;
  height: 10vh;
  position: relative;
  float: left;
  background: #0e7b67;
  color: #fff;
  font-weight: 700;
  font-size: 1.2vw;
  line-height: 10vh;
  text-align: center;
  margin: 2vh 1vw;
  border-radius: 5px;
  cursor: pointer;
}

.dialog-footer {
  width: 180px;
  left: 50%;
  transform: translateX(-50%)
}


::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  height: 36px;
  line-height: 36px;
}

::v-deep .el-input {
  flex: 1;
  height: 36px;
}

::v-deep .el-select {
  flex: 1;
  height: 36px;
}

::v-deep .el-input__icon {
  line-height: 36px;
}

::v-deep .el-input__inner {
  height: 36px;
}
</style>
